import { patient_mmrc_info } from '@/services/patient';
import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Modal, Radio, Space, Spin, Typography } from 'antd'
import React, { useEffect, useState } from 'react'
const { Title } = Typography;

interface Iprops {
    isShowMmrcOnline: (show: boolean) => void;
    onlineMmrcModalOpen: boolean;
    onlineId: number | undefined;
}
const OnlineMmrcInfo = (props: Iprops) => {
    const { isShowMmrcOnline, onlineMmrcModalOpen, onlineId } = props
    // 存储评估详情
    const [MmrcInfo, setMmrcInfo] = useState<any>(undefined);
    // 评估内容
    const [content, setcontent] = useState<any>(undefined);
    // 页面初始化
    useEffect(() => {
        // 获取改良呼吸困难指数评估详情
        const getData = async () => {
            if (onlineId) {
                let res: any = await patient_mmrc_info({ id: onlineId });
                console.log('改良呼吸困难指数评估详情', res);
                if (res.code == 200) {
                    setMmrcInfo(res.data);
                    console.log('改良呼吸困难指数评估详情', res.data.content, JSON.parse(res.data.content));
                    setcontent(JSON.parse(res.data.content));
                }
            }
        };
        getData();
    }, [])

    // 评估详情
    const get_oldinfo = async () => {
        return {
            data: MmrcInfo,
        };
    };
    return (
        <Modal
            title="改良呼吸困难指数评估详情"
            open={onlineMmrcModalOpen}
            onCancel={() => isShowMmrcOnline(false)}
            footer={null}
            width={1000}
        >
            <Divider />
            <Typography>
                {/*评估详情  */}
                {MmrcInfo === undefined ? (
                    <div
                        style={{
                            margin: '20px 0',
                            marginBottom: '20px',
                            padding: '30px 50px',
                            textAlign: 'center',
                        }}
                    >
                        <Spin size="large" />
                    </div>
                ) :
                    <>
                        <ProDescriptions
                            column={3}
                            request={async (params) => get_oldinfo()}
                            columns={[
                                {
                                    title: '评估时间',
                                    key: 'create_time',
                                    dataIndex: 'create_time',
                                },
                                {
                                    title: '评估驿站',
                                    key: 'poststation_name',
                                    dataIndex: 'poststation_name',
                                },
                                {
                                    title: '评估结果',
                                    key: 'results',
                                    dataIndex: 'results',
                                },
                            ]}
                        ></ProDescriptions>
                        <Title level={5}>改良呼吸困难指数（mMRC）</Title>
                        <Radio.Group value={content.question_1 || content.question_1 == 0 ? content.question_1 : ''}>
                            <Space direction="vertical"><Radio value={'0'} key={0}>
                                我仅在费力运动时出现呼吸困难
                            </Radio>
                                <Radio value={'1'} key={1}>
                                    我平地快步行走或步行爬小坡时出现气短
                                </Radio>
                                <Radio value={'2'} key={2}>
                                    我由于气短，平地行时比同龄人慢或者需要停下来休息
                                </Radio>
                                <Radio value={'3'} key={3}>
                                    我在行走100m左右或数分钟后需要停下来休息
                                </Radio>
                                <Radio value={'4'} key={4}>
                                    我因严重呼吸困难以致不能离开家，或在穿衣服、脱衣时出现呼吸困难
                                </Radio></Space>

                        </Radio.Group>
                    </>
                }
            </Typography>
        </Modal>
    )
}
export default OnlineMmrcInfo